<template>
  <div>
    <h2>Home</h2>
  </div>
</template>
<script lang="ts" setup>
import { Leafer, Rect, Ellipse, Line } from 'leafer-ui'
const leafer = new Leafer({ view: window, fill: '#f2f2f2' })
const rect = new Rect({
  x: 100,
  y: 100,
  width: 200,
  height: 200,
  fill: '#ccc',
  cornerRadius: [50, 80, 0, 80],
  draggable: true
})
leafer.add(rect)
leafer.add(Rect.one({ fill: '#ccc', draggable: true, width: 50, height: 50 }, 10, 10))
const ellipse = new Ellipse({
  x: 50,
  y: 50,
  width: 100,
  height: 100,
  startAngle: -90,
  endAngle: 180,
  innerRadius: 0.5,
  fill: "#ccc",
  draggable: true
})
leafer.add(ellipse)
const line = new Line({
  x: 100,
  y: 100,
  width: 300,
  strokeWidth: 5,
  stroke: '#ccc',
  rotation: 45,
  draggable: true
})
leafer.add(line)
</script>
<style lang="scss" scoped></style>